<template>
  <div>
    <el-upload
      ref="upload"
      action="#"
      :auto-upload="false"
      :on-change="onChange"
      :before-remove="beforeRemove"
      :file-list="fileList"
      :before-upload="beforeUpload"
      multiple
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button class="ml-3" type="success" @click="submit"> 上传 </el-button>
      <template #tip>
        <div class="el-upload__tip">仅支持 groovy 格式的文件上传！</div>
      </template>
    </el-upload>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { configUpsert } from "@/api/grabConfig";
import { ElMessage } from "element-plus";

// 上传组件实例
const upload = ref();

// 文件列表
const fileList = ref([]);
// 支持的文件格式
const ACCEPTED_EXTENSIONS = ["groovy"];

// 文件改变时
function onChange(file:any, fileListVal:any) {
  fileList.value = fileListVal;
}

// 移除文件之前的事件
function beforeRemove(file:any, fileListVal:any) {
  // 使用 filter 方法从 fileListVal 中移除要删除的文件
  const updatedFileList = fileListVal.filter((item:any) => item.uid !== file.uid);
  // 更新 fileList 的值
  fileList.value = updatedFileList;
}

// 请求前判断文件是否符合要求
// 如果符合则添加到上传队列
function beforeUpload(file:any) {
  const extension = file.name.split(".").pop().toLowerCase();
  if (!ACCEPTED_EXTENSIONS.includes(extension)) {
    ElMessage({
      type: "error",
      message: "仅支持 doc, xls, ppt, txt, pdf, png, jpg 和 jpeg 格式的文件",
    });
    return false;
  }
  return true;
}

// 提交请求
// 处理上传逻辑
async function submit() {
  if (fileList.value.length === 0) {
    return ElMessage.error("请选择要上传的文件");
  }
  // 创建文件实例
  const formData = new FormData();
  fileList.value.forEach((file:any) => {
    formData.append("file", file.raw);
  });

  try {
    configUpsert(formData)
      .then((res:any) => {
        if (res.code === 200) {
          ElMessage.success("文件上传成功");
          clearAttachments();
        }
      })
      .catch((error) => {
        ElMessage.error(error.message || "文件上传失败");
      });
  } catch (error:any) {
    ElMessage.error(error.message || "文件上传失败");
  }
}

// 清空附件列表
const clearAttachments = () => {
  if (upload.value) {
    upload.value.clearFiles(); // 调用实例方法 `clearFiles` 清空附件列表
  }
};
</script>

<style scoped>
:deep(.el-upload) {
  --el-upload-dragger-padding-horizontal: 40px;
  --el-upload-dragger-padding-vertical: 10px;
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  outline: none;
  display: inline-block;
  margin-right: 20px;
}
</style>
